<template>
  <a-layout-header>
    <icon-arrow-left
      @click="goBack"
      size="50"
      style="position: fixed; top: 3vw; left: 3vw; z-index: 999; color: white"
    />
  </a-layout-header>
  <a-space direction="vertical" style="width: 100%; padding: 16px; background-color: #f0f2f5">
    <a-card
      v-for="(item, index) in motionList"
      :key="index"
      :bordered="false"
      style="
        margin-bottom: 16px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      "
      @click="sportschapter"
    >
      <template #cover>
        <a-image :src="item.image" width="100%" height="200" object-fit="cover" />
      </template>
      <a-card-meta>
        <template #title>
          <a href="#" style="font-size: 18px; color: #333; font-weight: bold">{{ item.title }}</a>
        </template>
        <template #description>
          <div>
            <a-badge :count="item.duration" :status="'success'" style="margin-right: 8px" />
            <span style="color: #666">{{ item.duration }} mins</span>
            <a-badge
              :count="item.calories"
              :status="'error'"
              style="margin-left: 16px; margin-right: 8px"
            />
            <span style="color: #666">{{ item.calories }} kcal</span>
          </div>
        </template>
      </a-card-meta>
    </a-card>
  </a-space>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const goBack = () => {
  router.go(-1)
}
const motionList = ref([
  {
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    title: '活动练习',
    duration: 5,
    calories: 51,
  },
  {
    image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    title: '活动练习二',
    duration: 15,
    calories: 100,
  },
  // 更多项目...
])
const sportschapter = () => {
  router.push('/sportschapter')
}
</script>

<style scoped></style>
